<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="../css/youyi.css"/>
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=ZM5FnhEj8ZddP3FpGLM85lPFFVvj1Lgr"></script>
	<script src="http://libs.baidu.com/zepto/0.8/zepto.min.js"></script>
	<title>我是生产型企业</title>
</head>
<body>
	<div id="allmap">地图加载中...</div>
	<div class="company_detail gray company_detail_gray clear">
		<div class="cmpy_dtl_left">
			<!--<h1 class="com_dtl_h"><span>广州市广清环保设备有限公司</span><small>(环保工程)</small></h1>
			<p class="cmpy_label">
				<span class="cmpy_lbl_item">优蚁认证</span>
			</p>-->
			<a href="demand_details.html">
				<div class="list_content_box">
					<h2 class="envir_head clearfix">东莞保力***<span>环境监测</span></h2>
					<div class="envir_contact"><span class="contact_people">联系人：李**</span><span class="contact_phone mui-ellipsis">电话：13800138***</span></div>
					<div class="envir_descript"><p>需求描述：工业酒精0.1砘 擦机水0.5吨 洗板水0.0015吨助焊0.25吨 碎布0.3吨</p></div>
				</div>
			</a>
		</div>
	</div>
	<div class="company_detail company_detail_active active clear">
		<div class="cmpy_dtl_left">
			<h1 class="com_dtl_h"><span>广州市广清环保设备有限公司</span><small>(环保工程)</small></h1>
			<p class="xingxing_p">
				<span class="xinxin">
					<i class="xinxin_item"><img src="../images/environmenMap/xingxing_bg.png"/></i>
					<i class="xinxin_item"><img src="../images/environmenMap/xingxing_bg.png"/></i>
					<i class="xinxin_item"><img src="../images/environmenMap/xingxing_bg.png"/></i>
					<i class="xinxin_item"><img src="../images/environmenMap/xingxing_bg.png"/></i>
				</span>
				<span class="ammount">推荐指数：85%</span>
			</p>
			<p class="cmpy_label">
				<span class="cmpy_lbl_item green">优蚁认证</span>
				<span class="cmpy_lbl_item blue">协会认证</span>
				<span class="cmpy_lbl_item yellow">工商认证</span>
			</p>
		</div>
		<div class="navigation_div"><a href="javascript:;" class="navigation_btn">导航</a></div>
	</div>
	<div class="stop_navgat"><a href="javascript:;" class="stop_navgat_btn">停止</a></div>
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");    // 创建Map实例
		map.centerAndZoom(new BMap.Point(113.355747, 23.127191), 11);  // 初始化地图,设置中心点坐标和地图级别
		map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
		map.setCurrentCity("广州");          // 设置地图显示的城市 此项是必须设置的
		map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
		map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
	var curPst=null;
	
	// 复杂的自定义覆盖物//"#5ec520","#a0d87d","green_location"
    function ComplexCustomOverlay(point,text,bgcl,pdid){
    	if(bgcl=="green"){
    		bgcl=["#5ec520","#a0d87d","green_location","tuijian.png"];
    		this._tuijin=bgcl[3];
    	}else{
    		bgcl=["#16bbea","#75cee2","blue_location"];
    	};
      this._point = point;
      this._text = text;
      this._pdid=pdid;
      //this._overText = mouseoverText;
      this._bgcl=bgcl[0];
      this._bdcl=bgcl[1];
      this._bgImg=bgcl[2];
    }
    ComplexCustomOverlay.prototype = new BMap.Overlay();
    ComplexCustomOverlay.prototype.initialize = function(map){
      this._map = map;
      var div = this._div = document.createElement("div");
      div.style.position = "absolute";
      div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
      div.style.background = this._bgcl;
      div.style.border = "1px solid "+this._bdcl;
      div.style.padding = "4px 6px";      
      if(this._tuijin){
      	div.style.paddingRight = "62px";
      	div.style.background = this._bgcl+" url(../images/environmenMap/"+this._tuijin+") no-repeat 96% center/48px";
      };
      div.style.color = "#fff";
      //div.style.height = "--18px";
      div.style.lineHeight = "18px";
      div.style.whiteSpace = "nowrap";
      div.style.MozUserSelect = "none";
      div.style.fontSize = "12px"
      
      var span = this._span = document.createElement("span");
      div.appendChild(span);
      span.appendChild(document.createTextNode(this._text));
      
      span.src=this._pdid;
      span.style.color="#f90";
      console.log(span.src);
      var that = this;

      var arrow = this._arrow = document.createElement("div");
      arrow.style.background = "url(../images/environmenMap/"+this._bgImg+".png) no-repeat";
      arrow.style.position = "absolute";
      arrow.style.width = "40px";
      arrow.style.height = "40px";
      arrow.style.top = "-4px";
      arrow.style.left = "-40px";
      arrow.style.overflow = "hidden";
      div.appendChild(arrow);
     
      $(div).on("touchend",function(){
      	var thisText=this.querySelector("span").innerHTML;
      	if(that._tuijin){
      		$(".company_detail").removeClass("current");
      		$(".company_detail_active").addClass("current").find(".com_dtl_h span").text(thisText);
      		$(".navigation_div").on("touchend",function(e){
	      		$(".stop_navgat").addClass("active");
	      		$(".stop_navgat_btn").on("touchend",function(){
	      			clearInterval(curPst);
	      			$(this).off("click").removeClass("active");
	      		});
	      		showDiv(that._point.lng,that._point.lat);
//	      		curPst=setInterval(function(){ 
//	      			addMarker();
//	      		},3000);
				$(this).off("touchend"); 
				$(".company_detail").removeClass("current");	      		
	      	}); 
      		
      	}else{
      		$(".company_detail").removeClass("current");
      		$(".company_detail_gray").addClass("current").find(".com_dtl_h span").text(thisText);
      	};
      	$(this).off("touchend");
		//showDiv(that._point.lng,that._point.lat);
     });
      map.getPanes().labelPane.appendChild(div);
      return div;
    }
    ComplexCustomOverlay.prototype.draw = function(){
      var map = this._map;
      var pixel = map.pointToOverlayPixel(this._point);
	      this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
     	 this._div.style.top  = pixel.y - 30 + "px";
    };    
    
     function mcoFn(lng,lat,text,bgcl,pdid){
     	var point=new BMap.Point(lng,lat);
     	var myCompOverlay = new ComplexCustomOverlay(point,text,bgcl,pdid);
    		map.addOverlay(myCompOverlay);
     };
     function showDiv(divLng,divLat){
     	navigator.geolocation.getCurrentPosition(function(clbck){
     		drawMap(divLng,divLat,clbck.coords.longitude,clbck.coords.latitude);      		
      	});
      	//console.log(JSON.stringify(currnetPosition))
     };
     
     function addMarker(longitude,latitude){
     	navigator.geolocation.getCurrentPosition(function(clbck){
     		var new_point = new BMap.Point(clbck.coords.longitude,clbck.coords.latitude);//clbck.longitude,clbck.latitude
			var marke = new BMap.Marker(new_point);//创建标注
				$(".BMap_noprint").remove();	
				$(".BMap_Marker").not(":nth-child(1),:nth-child(2)").remove();
				$(".BMap_Marker").parent().next("div").find("span").remove();
				map.addOverlay(marke);//将标注添加到地图中
				//map.panTo(new_point);
      		
      });
};
     
     function drawMap(p1_0,p1_1,p2_0,p2_1){
     	//113.355747,"lat":23.12719
     	var p1 = new BMap.Point(p1_0,p1_1);//(113.355747,23.12719);
		var p2 = new BMap.Point(p2_0,p2_1)//(113.3855747,22.12719);
		//var p1 = new BMap.Point(113.355747,23.12719);
		//var p2 = new BMap.Point(113.3855747,22.12719);
		var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
			driving.search(p2,p1);
     };
     
    mcoFn("113.355747","23.127191","广州市广生产型企业","green",77);
    mcoFn("113.355747","23.227291","寻求：生产型企业","blue",78);
    mcoFn("113.455747","23.627191","广州市软捷网络科技有限公司","green",79);
    mcoFn("113.255747","23.027291","生产型企业集团","blue",80);
	
</script>
